<template>
  <div class="countdown">
    <div class="countdown-number">{{ currentCount }}</div>
    <p>{{ text }}</p>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const props = defineProps({
  seconds: {
    type: Number,
    default: 3
  },
  text: {
    type: String,
    default: '准备开始'
  },
  onComplete: {
    type: Function,
    default: () => {}
  }
})

const currentCount = ref(props.seconds)

const startCountdown = () => {
  const timer = setInterval(() => {
    currentCount.value--
    if (currentCount.value <= 0) {
      clearInterval(timer)
      props.onComplete()
    }
  }, 1000)
}

onMounted(() => {
  startCountdown()
})
</script>

<style scoped>
.countdown {
  text-align: center;
  padding: 2rem;
}

.countdown-number {
  font-size: 6rem;
  font-weight: bold;
  color: #4a90e2;
  margin-bottom: 1rem;
}

p {
  font-size: 1.2rem;
  color: #666;
}
</style>